<template>
  <div id="login" class="login-container" >
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>登录</span>
      </div>
      <el-form label-width="100px" class="demo-ruleForm" autocomplete="off">
        <!-- 为用户名和密码输入框设置“双向绑定” -->
        <el-form-item label="用户名" prop="userName">
          <el-input type="text" v-model="userName"  class="input-left"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="userPwd">
          <el-input type="password" v-model="userPwd" show-password  class="input-left"></el-input>
        </el-form-item>

        <el-form-item>
          <!-- 为登录按钮和重置按钮绑定单击事件 -->
          <el-button type="primary" @click="doLogin" class="login-button">登录</el-button>
          <el-button type="danger" @click="doReset" class="reset-button">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    data() {
      return {
        userName: '',
        userPwd: '',
      }
    },
    computed: {
      ...mapState(['token'])
    },
    methods: {
      async doLogin() {
        console.log("userName = "+this.userName);
        console.log("userPwd = "+this.userPwd);
        console.log("axios = "+this.$axios);
        await this.$axios.post('http://localhost:8091/account/login', {
          "userName": this.userName,
          "userPwd": this.userPwd
        }).then(res => {
          console.log("request")
          console.log(res);
          if(!res) {
            console.log("res.data is null");
            return;
          }
          let code = res.data.code;
          console.log("login code === " + code);
          if (code === 200) {
            console.log("login success");
            var token = res.data.data.token;
            var user = res.data.data;
            this.$store.commit('setUser', user);
            console.log(user);
            this.$store.commit('setToken', token);
            console.log("vuex token is " + this.token)
            this.$router.push('/main')
          } else {
            console.log("login fail");
            console.log(res);
            this.$message.error(res.data.msg);
            this.$router.push('/login')
          }
        }).catch(err => {
          console.log("err = " + err);
          this.$message.error("err: ",err);
        })
      },
      doReset() {
       this.userName = '';
       this.userPwd = '';
      },
    },
    created() {
      console.log(this.$message);
    }
  }
</script>

<style scoped lang="less">
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 130vh;
  background-color: #f0f2f5;
  background-image: url(../assets/背景图片.jpg) ;
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
}

.box-card {
  width: 400px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.clearfix span {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.login-button, .reset-button {
  margin-right: 10px;
}


/* 自定义 CSS 类 */
.input-left {
  //text-align: left;
  padding-left: 0%;
  margin-left: auto;
  float: left;
  align-items: left;
}
</style>

